<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>查看/修改角色</title>
		<link href="css/bootstrap.css" rel="stylesheet">
	</head>
	</body>
	<article>
		<header class="container-fluid">
			<ul class="breadcrumb">
				<li>
					<a href="/view/index.html">首页</a> <span class="divider">/</span>
				</li>
				<li class="active">系统管理<span class="divider">/</span>
				</li>
				<li>
					<a href="staff.html">角色管理</a>
					<span class="divider">/</span></li>
			</ul>
		</header>
		<section class="container-fluid" style="padding-top:15px;padding-bottom: 15px;">
			<a class="btn btn-normal" href="staff.html">返回</a>
			<button class="btn btn-primary">删除</button>
		</section>

		<section class="container-fluid">
			<form class="form-horizontal" @submit.prevent="submit">

				<div class="control-group">
					<label class="control-label">员工编号</label>
					<div class="controls">
						<input type="text" v-model="params.no" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">职称</label>
					<div class="controls">
						<input type="text" v-model="params.title" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">详情</label>
					<div class="controls">
						<input type="text" v-model="params.introUrl" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">性别</label>
					<div class="controls">
						<input type="text" v-model="params.male" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">工作电话</label>
					<div class="controls">
						<input type="text" v-model="params.workPhone" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">私人电话</label>
					<div class="controls">
						<input type="text" v-model="params.privatePhone" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">入职时间</label>
					<div class="controls">
						<input type="text" v-model="params.employedDate" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">电子邮箱</label>
					<div class="controls">
						<input type="text" v-model="params.email" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">微信</label>
					<div class="controls">
						<input type="text" v-model="params.wechat" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">家庭地址</label>
					<div class="controls">
						<input type="text" v-model="params.address" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">照片</label>
					<div class="controls">
						<input type="text" v-model="params.image" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">身份证号</label>
					<div class="controls">
						<input type="text" v-model="params.idCard" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">出生日期</label>
					<div class="controls">
						<input type="text" v-model="params.birthday" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">名字</label>
					<div class="controls">
						<input type="text" v-model="params.name" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">账户号码</label>
					<div class="controls">
						<input type="text" v-model="params.account" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">员工类型</label>
					<div class="controls">
						<input type="text" v-model="params.role" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">创建人</label>
					<div class="controls">
						<input disabled type="text" :value="vo.createUserId" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">创建时间</label>
					<div class="controls">
						<input disabled type="text" :value="vo.createTime" />
					</div>
				</div>

				<div class="control-group">
					<div class="controls">
						<button type="submit" class="btn btn-primary">修改</button>
						<button type="button" @click="reset" class="btn btn-primary">重置</button>

					</div>

				</div>

			</form>

		</section>

	</article>

	<script src="js/bootstrap.js"></script>
	<script src="js/jquery.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/axios.js"></script>
	<script>
		const app = new Vue({
			el: "body>article",
			data: {
				id: location.hash.slice(1),
				params: {},
				vo: {} //用于重置功能
			},
			methods: {
				submit: function() {
					//仅提交修改了的属性
					let data = null;
					let vo = this.vo;
					let params = this.params;
					for(let key in params) {
						if(Object.hasOwnProperty(key)) {
							if(params[key] !== vo[key]) {
								if(data === null) {
									data = {};
								}
								data[key] = params[key];
							}
						}
					}
					//无修改字段，直接结束
					if(data == null) {
						return;
					}

					axios.put("http://127.0.0.1:8080/api/staff/" + this.id, data).then(resp => {
						if(resp.status === 200) {
							toast("修改成功，请返回");
						} else {
							toast("失败了");
							console.log(resp)
						}
					});
				},
				reset: function() {
					//克隆一份
					this.params = Object.assign({}, this.vo);
				}
			},
			created: function() {
				axios.get("http://127.0.0.1:8080/api/staff" + this.id).then(resp => {
					if(resp.status ===200) {
						this.vo = resp.data.data;
						//设置params
						this.reset();
						console.log(resp)
					} else {
						toast("失败了");

					}
				});
			}

		});
	</script>

	</body>

</html>